<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
        v-for指令:
        1.用于展示列表数据
        2.语法：v-for="(item, index) in xxx" :key="yyy"
        3.可遍历：数组、对象、指定次数（用的很少）

        key的原理：
        当 Vue.js 用 `v-for` 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
        如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，
        并且确保它在特定索引下显示已被渲染过的每个元素。 这个功能可以有效的提高渲染的效率。
        但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，
        你需要为每项提供一个唯一 `key` 属性。理想的 `key` 值是每项都有的且唯一的 id。 

        开发中如何选择key?:
        1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
        2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
            使用index作为key是没有问题的。
		-->
    <!-- 准备好一个容器-->
    <div id="app">
        <!-- 遍历数组 -->
        <h2>学生集合遍历(数组)</h2>
        <table border="1" cellspacing="0">
            <tr v-for="student of students" :key="student.id">
                <td>{{student.id}}</td>
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
            </tr>
        </table>
        <br/>
        <table border="1" cellspacing="0">
            <tr v-for="(student, index) of students" :key="index">
                <td>{{index}}</td>
                <td>{{student.id}}</td>
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
            </tr>
        </table>
        <!-- 遍历对象,遍历对象里面的键和值：(value, key, index) -->
        <ul>
            <li v-for="(value, key, index) of banji">
                {{index+1}}--{{key}}--{{value}}
            </li>
        </ul>
        <ul>
            <li v-for="(value, key) of banji">
                {{key}}--{{value}}
            </li>
        </ul>

        <!-- 遍历指定次数 -->
        <ul>
            <li v-for="number of 5">
                {{number}}
            </li>
        </ul>
        <ul>
            <li v-for="(number, index) of 5">
                {{index}}--{{number}}
            </li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        //创建vue实例
        new Vue({
            el: '#app',
            data: {
                students: [//数组
                    {id: 1, name: '张三', age: 23},
                    {id: 2, name: '李四', age: 23},
                    {id: 3, name: '王五', age: 23}
                ],
                banji: {//对象
                    id: 1,
                    name: 'java2207',
                    count: 30
                }
            }
        })
    </script>
</body>

</html>